<template>
	<view class="ikz-bid">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<!-- ad -->
		<!-- list -->
		<view>
			<view class="ikz-sticky-box" id="ikz-sticky-box">
				<view class="ikz-sticky-title" v-for="(item,index) in type_list.list" :key="index"><text
					class="ikz-textcenter"
					:style="current == index ? 'font-weight: 800;color: #FDAF66;border-bottom:6rpx solid #FDAF66;':''"
					@click="change" :data-index="index" :data-id="item.id">{{item.server_name}}</text></view>
			</view>
			<view class="ikz-box">
				<view class="ikz-sticky-item" v-for="(item,index) in show_info.list" :key="index"
					@click="godetail(item.id)">
					<view class="ikz-sticky-top">
						<image class="icon" :src="adminImgPath+item.business_logo_image" mode="aspectFill"></image>
						<view class="name">{{item.business_name}}</view>
						<view class="mode" v-if="item.delivery==1">自提</view>
						<view class="mode" v-if="item.delivery==2">跑腿</view>
					</view>
					<view class="ikz-sticky-content">
						<scroll-view class="list-main" scroll-x>
							<view class="list-tips" v-for="(goods,i) in item.goods" :key="i">
								<image class="img" :src="adminImgPath+goods.image" mode="aspectFit"></image>
								<view class="tag">{{goods.name}}</view>
							</view>
						</scroll-view>
						<view class="list-right">
							<view class="flex-box">
								<view class="price">
									<text class="icon">￥</text>
									<text>{{item.total_fee}}</text>
								</view>
								<view class="number">共{{item.total_count}}件</view>
							</view>
						</view>
					</view>
					<view class="ikz-sticky-foot">
						<view class="ikz-sticky-bottom" v-if="item.status == 0">
							<view class="ikz-sticky-btn" @click.stop="pay(item.order_no,index)">
								去支付
							</view>
							<view class="ikz-sticky-btn1" @click.stop='cancel(item.id,index)'>
								取消订单
							</view>
						</view>
						<view class="ikz-sticky-bottom" v-if="item.status == 1">
							<view class="ikz-sticky-btn5">
								待接单
							</view>
							<view class="ikz-sticky-btn1" @click.stop='cancel(item.id,index)'>
								取消订单
							</view>
						</view>
						<view class="ikz-sticky-bottom" v-if="item.status == 2">
							<view class="ikz-sticky-btn6">
								待确认
							</view>
							<view class="ikz-sticky-btn2" @click.stop='confirm(item.id,index)'>
								确认收货
							</view>
						</view>
						<view class="ikz-sticky-bottom" v-if="item.status == 3">
							<view class="ikz-sticky-btn3">
								已完成
							</view>
						</view>
						<view class="ikz-sticky-bottom" v-if="item.status == 4">
							<view class="ikz-sticky-btn3">
								已取消
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ikz-more" v-if="load_more == 4">
				——我也是有底线的——
			</view>
			<view class="ikz-more" v-if="load_more == 5">
				<image class="ikz-empty" src="/static/empty.png"></image>
			</view>
		</view>
		<!-- list -->
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue';
	var app = getApp();
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading,
			ikzTabbar
		},
		data() {
			return {
				tabbar_Data: {
					type: 1,
					list: [ {
							title: "订单",
							url: "/pages/Component/supermarket/Program/index/index",
							iconPath: "/static/supermarket/tabbar/index_task.png",
							selectedIconPath: "/static/supermarket/tabbar/index.png",
							status: 1,
						},
						{
							title: "商铺",
							url: "/pages/Component/supermarket/Program/order/index",
							iconPath: "/static/supermarket/tabbar/marer_task.png",
							selectedIconPath: "/static/supermarket/tabbar/marer.png",
							status: 1,
						},
						{
							title: "我的",
							url: "/pages/Component/supermarket/Program/user/index",
							iconPath: "/static/supermarket/tabbar/user_task.png",
							selectedIconPath: "/static/supermarket/tabbar/user.png",
							status: 1,
						},
					]
				},
				adminImgPath: app.globalData.adminImgPath,
				loading_css: {
					display: 'flex'
				},
				status: '',
				show_info: {
					list: []
				},
				type_list: {
					list: [{
							id: '',
							server_name: '全部'
						},
						{
							id: '0',
							server_name: '待付款'
						},
						{
							id: '1',
							server_name: '待接单'
						},
						{
							id: '2',
							server_name: '待确认'
						},
						{
							id: '3',
							server_name: '已完成'
						},
						{
							id: '4',
							server_name: '已取消'
						}
					]
				},
				page: 1,
				limit: 10,
				load_more: 2,
				type_index: '',
				current: 0,
				show_status: 2,
			};
		},
		onLoad(options) {
			this.status = options.status || '';
			if (this.status == '') {
				this.current = 0;
			} else {
				this.current = Number(this.status) + 1
			}
			this.orderList((res) => {
				this.loading_css.display = 'none';
			});
		},
		onShow() {
			if (this.show_status == 2) {
				this.show_status = 3;
			} else {
				this.page = 1;
				this.orderList((res) => {
					this.loading_css.display = 'none';
				});
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.orderList((res) => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.load_more == 2) {
				this.page++;
				this.load_more = 3;
				this.orderList((res) => {});
			}
		},
		methods: {
			//请求页面数据
			orderList(fn) {
				var path = '/xyb/supermarket/order/index';
				var data = {
					page: this.page,
					limit: this.limit,
					status: this.status
				};
				ikz.post(path, data, res => {
					if (res.data.code) {
						console.log(res);
						var temp_list = res.data.data.data;
						if (this.page != 1) {
							for (var i = 0; i < temp_list.length; i++) {
								this.show_info.list.push(temp_list[i]);
							}
						} else {
							this.show_info.list = temp_list;
						}
						if (temp_list.length == this.limit) {
							this.load_more = 2;
						} else {
							if (this.page == 1) {
								if (temp_list.length == 0) {
									this.load_more = 5;
								} else {
									this.load_more = 4;
								}
							} else {
								this.load_more = 4;
							}
						}
						this.$forceUpdate();
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn();
				});
			},
			godetail(id) {
				uni.navigateTo({
					url: '/pages/Component/supermarket/Program/order/details?id=' + id
				})
			},
			change: function(e) {
				this.current = e.currentTarget.dataset.index;
				this.status = e.currentTarget.dataset.id;
				this.page = 1;
				this.orderList((res) => {

				});
			},
			pay(order_no,index) {
				uni.showLoading({
					mask: true,
					title: '正在请求支付...'
				})
				var path = '/xyb/supermarket/order/wx_minapp_pay';
				var data = {
					order_no: order_no,
				};
				ikz.post(path, data, res => {
					console.log("调起小程序微信支付 ", res)
					uni.hideLoading()
					if (res.data.code == 1) {
						wx.requestPayment({
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: res => {
								console.log('success', res);
								if (res.errMsg == "requestPayment:ok") {
									uni.reLaunch({
										url: "/pages/Component/supermarket/Program/store/success?id="+this.show_info.list[index].id+"&type="+this.show_info.list[index].delivery+"&address="+this.show_info.list[index].address
									})
								}
							},
							fail: res => {
								console.log('fail', res);
								uni.showToast({
								title: '支付失败，请稍后再试',
									duration: 2000,
									icon: 'none'
								})
							},
							complete: res => {
								console.log('complete', res);
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			cancel(id, index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: "加载中",
								mask: true
							})
							var path = '/xyb/supermarket/order/cancel';
							var data = {
								id: id
							};
							ikz.post(path, data, res => {
								if (res.data.code) {
									uni.showToast({
										title: '取消成功',
										duration: 2000
									});
									that.show_info.list[index].status = 4;
									if (that.show_info.list.length == 0) {
										that.load_more = 5;
									}
									that.$forceUpdate();
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg,
										showCancel: false,
										success: function(res) {}
									});
								}
								uni.hideLoading()
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirm(id, index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定订单已收货？',
					success: function(res) {
						if (res.confirm) {
							var path = '/xyb/supermarket/order/confirm_complete';
							var data = {
								id: id
							};
							uni.showLoading({
								title: "加载中",
								mask: true
							})
							ikz.post(path, data, res => {
								if (res.data.code) {
									uni.showToast({
										title: '收货成功',
										duration: 2000
									});
									that.show_info.list[index].status = 3;
									if (that.show_info.list.length == 0) {
										that.load_more = 5;
									}
									that.$forceUpdate();
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg,
										showCancel: false,
										success: function(res) {}
									});
								}
								uni.hideLoading()
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}
	
	.ikz-box {
		padding-top: 20rpx;
	}
	
	.ikz-sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		padding: 15px 0 15px 0;
		white-space: nowrap;
		overflow-x: auto;
		background: #fff;
	}

	.ikz-sticky-title {
		box-sizing: border-box;
		padding: 0 20rpx;
		display: inline-block;
		text-align: center;
	}

	.ikz-textcenter {
		padding-bottom: 10rpx;
	}

	.ikz-sticky-item {
		box-sizing: border-box;
		padding: 30rpx;
		width: 95%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 15rpx;
	}

	.ikz-sticky-top {
		display: flex;
		align-items: center;
		
		.icon {
			width: 58rpx;
			height: 58rpx;
			border-radius: 9rpx;
		}
		
		.name {
			font-weight: 600;
			font-size: 29rpx;
			line-height: 40rpx;
			color: #333333;
			margin: 0 22rpx;
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 1;
		}
		
		.mode {
			font-weight: 400;
			font-size: 22rpx;
			line-height: 31rpx;
			color: #FBC12D;
			background: #FFF5DA;
			border-radius: 9rpx;
			padding: 8rpx 22rpx;
		}
	}
	
	.ikz-sticky-content {
		position: relative;
		margin-top: 25rpx;
		
		.list-main {
			width: 100%;
			white-space: nowrap;
			
			.list-tips {
				display: inline-block;
				margin-left: 22rpx;
				max-width: 220rpx;
				
				&:first-child {
					margin-left: 0;
				}
				
				&:last-child {
					margin-right: 180rpx;
				}
				
				.img {
					width: 180rpx;
					height: 130rpx;
					border-radius: 9rpx;
					margin-top: 29rpx;
					display: block;
					margin: 0 auto;
				}
				
				.tag {
					font-weight: 400;
					font-size: 25rpx;
					line-height: 36rpx;
					color: #979797;
					margin-top: 16rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		
		.list-right {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba($color: #fff, $alpha: 0.9);
			padding-left: 33rpx;
			display: flex;
			align-items: center;
			align-self: center;
			
			.price {
				font-weight: 600;
				line-height: 29rpx;
				color: #FF0000;
				
				.icon {
					font-size: 22rpx;
				}
				
				text {
					font-size: 33rpx;
				}
			}
			
			.number {
				font-weight: 400;
				font-size: 22rpx;
				line-height: 29rpx;
				color: #979797;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}
	
	.ikz-sticky-foot {
		margin-top: 36rpx;
	}
	
	.ikz-sticky-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.ikz-sticky-btn {
		background: #FF6565;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}

	.ikz-sticky-btn1 {
		background: #D54242;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}

	.ikz-sticky-btn2 {
		background: #76A8FD;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}

	.ikz-sticky-btn4 {
		background: #42D5BE;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}

	.ikz-sticky-btn3 {
		background: #D6D6D6;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}
	
	.ikz-sticky-btn5 {
		background: #3AB74E;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}
	
	.ikz-sticky-btn6 {
		background: #FBC12D;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		margin-left: 15rpx;
	}

	.ikz-more {
		width: 100%;
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		padding-bottom: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ikz-empty {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
		margin-top: 150rpx;
	}
</style>
